<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Docking Code</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content ="no-siteapp"/>
    <link rel="icon" type="image/png" href="/static/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/static/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="/static/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/static/css/app.css">
    <link rel="stylesheet" href="/static/css/amazeui.datatables.min.css"/>


    <link href="/static/css/css/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/css/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/css/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/css/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet"
          type="text/css"/>
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL PLUGINS -->
    <link href="/static/css/css/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/css/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- BEGIN THEME GLOBAL STYLES -->
    <link href="/static/css/css/components.min.css" rel="stylesheet" id="style_components" type="text/css"/>
    <link href="/static/css/css/plugins.min.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME GLOBAL STYLES -->
    <!-- BEGIN THEME LAYOUT STYLES -->
    <link href="/static/css/css/layout/css/layout.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/css/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="/static/css/css/layout/css/custom.min.css" rel="stylesheet" type="text/css"/>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body class="theme-white">
<div class="am-g tpl-g" id="form_wizard_1">
    <div class="portlet-body form">
        <form class="form-horizontal" action="#" id="submit_form" method="POST" novalidate="novalidate">
            <div class="form-wizard">
                <div class="form-body">
                    <div class="tab-content">
                        <div class="tab-pane active"  id="tab1">
                            <div class="form-group">
                                <label class="control-label col-md-3">权限名
                                    <span class="required" aria-required="true"> * </span>
                                </label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="Name">
                                    <!--<span class="help-block"> Provide your username </span>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">链接
                                    <span class="required" aria-required="true"> * </span>
                                </label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="Value">
                                    <!--<span class="help-block"> Provide your email address </span>-->
                                </div>
                            </div>
                            <div class="form-group" style="width:45%;float:left;">
                                <label class="control-label col-md-3">图标
                                    <span class="required" aria-required="true"> * </span>
                                </label>
                                <div id="selectIcon" class="col-md-4">
                                    <input type="text" class="form-control" name="Icon">
                                    <!--<span class="help-block"> Provide your email address </span>-->
                                </div>
                            </div>
                            <div class="form-group" style="width:45%;float:left;margin-left: 15%">
                                <label class="control-label col-md-3">优先级
                                    <span class="required" aria-required="true"> * </span>
                                </label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="Sort">
                                    <!--<span class="help-block"> Provide your email address </span>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">别名
                                </label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="Remark">
                                    <!--<span class="help-block"> Provide your email address </span>-->
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">组ID
                                </label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="GroupId">
                                    <!--<span class="help-block"> Provide your email address </span>-->
                                </div>
                            </div>
                            <div class="form-group" style="width:45%;float:left">
                                <label class="control-label col-md-3">等级
                                    <span class="required" aria-required="true"> * </span>
                                </label>
                                <div class="col-md-4">
                                    <input id="Level" type="text" class="form-control"  name="Level">
                                    <!--<span class="help-block"> Provide your email address </span>-->
                                </div>
                            </div>
                            <script>
                                $("#Level").bind("input propertychange", function(){
                                    if ($("#Level").val() !== '0' && $("#Level").val() !== "") {
                                        $("#Pid").css('visibility', 'visible');
                                    } else {
                                        $("#Pid").css('visibility', 'hidden');
                                    }
                                })
                            </script>

                            <div class="form-group" id="Pid" style="visibility:hidden;width:45%;float:left;margin-left:10%">
                                <label class="control-label col-md-3">父ID
                                    <span class="required" aria-required="true"> * </span>
                                </label>
                                <div class="col-md-4" id="selectPid">

<!--
                                    <input type="text" class="form-control" name="Pid">-->
                                    <!--<span class="help-block"> Provide your email address </span>-->
                                </div>
                            </div>
                            <script>
                                var id = parent.$("#NodeId").val();

                                console.log(id);

                                if (id !== "") {
                                    $.ajax({
                                        type : 'GET',
                                        url : '/nodejson/getone?Id=' + id,
                                        async : false,
                                        success : function(data) {
                                            $(' input[ name="Name"]').val(data.Name);
                                            $(' input[ name="Icon"]').val(data.Icon);
                                            $(' input[ name="Value"]').val(data.Value);
                                            $(' input[ name="Level"]').val(data.Level);
                                            $(' input[ name="Sort"]').val(data.Sort);
                                            $(' input[ name="Remark"]').val(data.Remark);
                                            $(' input[ name="GroupId"]').val(data.GroupId);
                                            $("#pName").val(data.pName);
                                        }
                                    })
                                }
                            </script>
                        </div>
                    </div>
                </div>
                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-offset-3 col-md-9">
                            <a href="javascript:;" class="btn btn-outline green" onclick="clicknext()">
                                Continue
                                <i class="fa fa-angle-right"></i>
                            </a>
                            <script>
                                var html = $("#selectPid").html();

                                $.ajax({
                                    type : 'get',
                                    url : '/node/getpname',
                                    async : false,
                                    success : function(data) {
                                        console.log(data);
                                        html += '<select id="pName" class="form-control select2-allow-clear">';
                                        for (var i = 0; i < data.length; i++) {
                                            html += '<option value="'+ data[i] +'" >'+ data[i] +'</option>';
                                        }
                                        html += '</select>';
                                        $("#selectPid").html(html);
                                    }
                                });

                                function clicknext() {
                                    console.log(111);
                                    var Name = $(' input[ name="Name"]').val();
                                    var Icon = $(' input[ name="Icon"]').val() + " sidebar-nav-link-logo";
                                    var Value = $(' input[ name="Value"]').val();
                                    var Level = $(' input[ name="Level"]').val();
                                    var Sort = $(' input[ name="Sort"]').val();
                                    var Remark = $(' input[ name="Remark"]').val();
                                    var GroupId = $(' input[ name="GroupId"]').val();
                                    var pName = $("#pName").val();



                                    $.ajax({
                                        type : 'post',
                                        url : '/nodejson',
                                        data : {
                                            Name : Name,
                                            Icon : Icon,
                                            Value : Value,
                                            Level : Level,
                                            pName : pName,
                                            Sort : Sort,
                                            Remark : Remark,
                                            GroupId : GroupId
                                        },
                                        success : function () {
                                            window.location.href = '/node'
                                        }

                                    })

                                }
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!--<script src="/static/js/amazeui.min.js"></script>-->
<!--<script src="/static/js/amazeui.datatables.min.js"></script>-->
<!--<script src="/static/js/dataTables.responsive.min.js"></script>-->
<!--[if lt IE 9]>
<script src="/static/css/css/plugins/respond.min.js"></script>
<script src="/static/css/css/plugins/excanvas.min.js"></script>
<script src="/static/css/css/plugins/ie8.fix.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="/static/css/css/plugins/jquery.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="/static/css/css/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
<script src="/static/js/bootstrap-wizard/jquery.bootstrap.wizard.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="/static/js/js/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="/static/js/js/form-wizard.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="/static/js/js/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="/static/js/js/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="/static/js/js/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="/static/js/js/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
<!-- END THEME LAYOUT SCRIPTS -->
</body>
</html>